<!-- 历史热门组件 -->
<template>
    <div class="history-hot">
        <!-- 历史记录 -->
        <div class="his-hot" v-if="isShowHistory">
            <div class="hd">
                <h4>历史记录</h4>
                <van-icon name="delete" @click="clearFn" />
            </div>
            <div class="bd">
                <van-tag v-for="(item, index) in searchHistoryData" @click="goSearch(item)" :key="index" plain type="default">{{ item }}</van-tag>
            </div>
        </div>
        <!-- 热门搜索 -->
        <div class="his-hot">
            <div class="hd">
                <h4>热门搜索</h4>
            </div>
            <div class="bd">
                <van-tag v-for="(item, index) in searchHotData" :key="index" @click="goSearch(item.keyword)" plain :type="item.is_hot ? 'danger' : 'default'">{{ item.keyword }}</van-tag>
            </div>
        </div>
    </div>
</template>

<script>
//引入删除历史记录
import { Clearhistory } from '@/utils/https.js';
export default {
    data() {
        return {
            isShowHistory: true, // 是否展示历史记录
        };
    },
    //搜索历史记录数组=>  父传子searchHotData
    props: ['searchHistoryData', 'searchHotData'],
    methods: {
        clearFn() {
            // 清除历史记录
            Clearhistory().then(res => {
                console.log(222, res);
                if (res.errno == 0) {
                    // 提示删除成功
                    this.$toast.success('删除成功');
                    // 隐藏历史记录
                    this.isShowHistory = false;
                }
            });
        },
        goSearch(m) {
            //点击历史标签进行搜索
            // m 为关键字 子传父 传到父组件 SearchPopup.vue
            this.$emit('goSearch', m);
        },
    },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.history-hot {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    .his-hot {
        background-color: #fff;
        padding: 2%;
        .hd {
            padding-top: 2%;
            display: flex;
            justify-content: space-between;
        }
        .bd {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .van-tag {
                padding: 3px;
                margin: 0 2px;
            }
        }
    }
}
</style>
